<template>
  <navigatorComp
    title="祭拜服务"
    bgcColor="#F6F6F6"
    fontColor="#0E0E0E"
  ></navigatorComp>

  <view class="content">
    <mescroll-uni
      :down="downOption"
      :up="upOption"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :height="height + 'px'"
    >
      <view class="ceremory_list">
        <view class="ceremory_item" v-for="(item, index) in list">
          <image :src="item.imageUrl" mode=""></image>
          <view class="ceremory_item_info">
            <view class="ceremory_item_title singleLineOverflowHidden">
              {{ item.title }}
            </view>
            <view class="ceremory_item_text singleLineOverflowHidden">
              {{ item.content }}
            </view>
            <!-- <view
							class="ceremory_item_pay"
							@click="
								goUrl(`/subPages/service/consult?dataObj=` + JSON.stringify(item))
							"
						>
							<view class="ceremory_item_price">￥{{ item.price }}</view>
							<view class="ceremory_item_payBtn display_flex">马上咨询</view>
						</view> -->
            <view class="ceremory_item_pay" @click="contactModel.show = true">
              <!-- <view class="ceremory_item_price">￥{{ item.price }}</view> -->
			  <view class="ceremory_item_price"></view>
              <view class="ceremory_item_payBtn display_flex">马上咨询</view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>

  <!-- 客服 -->
  <!-- <customerService :qrcodeUrl="contactModel.qrcodeUrl"></customerService> -->

  <!-- 展示二维码弹框 -->
  <qrcodePopup
    v-model:show="contactModel.show"
    :qrcodeUrl="contactModel.qrcodeUrl"
  ></qrcodePopup>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick } from "vue";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import qrcodePopup from "@/components/customerService/qrCodePopup.vue";
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import navigatorComp from "/components/navigator/index.vue";
import footerBtn from "/components/footerBtn/index.vue";
import customerService from "/components/customerService/index.vue";
import ServiceApi from "@/API/service/index.js";
import CommonApi from "@/API/commenApi";

const serviceApi = new ServiceApi();
const commonApi = new CommonApi();
// 客服弹框
const contactModel = reactive({
  show: false,
  qrcodeUrl: "",
});
onLoad(() => {
  // #ifdef MP-WEIXIN
  height.value =
    uni.getSystemInfoSync().screenHeight -
    getApp().globalData.bottom -
    getApp().globalData.navHeight;
  // #endif

  // #ifdef APP || H5
  height.value =
    uni.getSystemInfoSync().screenHeight -
    getApp().globalData.bottom -
    getApp().globalData.navHeight -
    uni.upx2px(88);
  // #endif
});

onShow(() => {
  setTimeout(() => {
    latestId.value = 0;
    getMescroll().resetUpScroll();
    getCustomerUrl();
  }, 1);
});
const { getMescroll, mescrollInit } = useMescroll(); // 调用mescroll的hook
//翻页信息
const downOption = ref({
  auto: false,
});
const upOption = ref({
  auto: false,
  // empty: false,
});
const latestId = ref(0); //最后一个元素的id
const height = ref(0); //列表高度

const list = ref([1, 2, 3]); //墓园列表

const downCallback = (mescroll) => {
  latestId.value = 0;
  getMescroll().resetUpScroll();
};

/**
 * 上拉加载
 */
const upCallback = (mescroll) => {
  serviceApi
    .getServiceListApi({
      latestId: latestId.value,
      serviceType: 2,
    })
    .then((res) => {
      const curPageData = res.data.serviceList || []; // 当前页数据
      if (latestId.value == 0) list.value = [];
      list.value = list.value.concat(curPageData);
      if (curPageData.length) {
        latestId.value = curPageData[curPageData.length - 1].id || 0;
      }
      mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
    })
    .catch(() => {
      mescroll.endErr(); // 请求失败, 结束加载
    });
};

const goUrl = (url) => {
  uni.navigateTo({
    url: url,
  });
};

/**
 * 获取客服二维码
 */
const getCustomerUrl = async () => {
  //位置    0：全局    1：消息       2：服务定制      3：我的
  let res = await commonApi.getCustomerUrl({ from: 2 });
  if (res.code === 0) {
    contactModel.qrcodeUrl = res.data.url;
  }
};
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
  /* #ifdef H5 */
  padding-top: 0;
  /* #endif */
}

.content {
  background-color: #fff;
  padding: 0;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}

.ceremory_list {
  padding: 32rpx 32rpx 24rpx 24rpx;
  width: 100%;
  box-sizing: border-box;

  .ceremory_item {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    image {
      width: 240rpx;
      height: 240rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin-right: 32rpx;
      flex-shrink: 0;
    }

    .ceremory_item_info {
      flex: 1;
      height: 240rpx;

      .ceremory_item_title {
        font-weight: 600;
        font-size: 28rpx;
        color: #0e0e0e;
        line-height: 33rpx;
        width: 100%;
        margin-bottom: 14rpx;
      }

      .ceremory_item_text {
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        line-height: 36rpx;
        text-align: justify;
        width: 100%;
        -webkit-line-clamp: 3;
        margin-bottom: 14rpx;
        height: 108rpx;
      }

      .ceremory_item_pay {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .ceremory_item_price {
          font-weight: 500;
          font-size: 36rpx;
          color: #ff4c5a;
          line-height: 42rpx;
          letter-spacing: 1px;
        }

        .ceremory_item_payBtn {
          width: 222rpx;
          height: 62rpx;
          background: #f3e0bb;
          border-radius: 48rpx 48rpx 48rpx 48rpx;
          font-weight: 500;
          font-size: 26rpx;
          color: #0e0e0e;
          line-height: 26rpx;
          letter-spacing: 1px;
        }
      }
    }
  }
}
</style>
